<template>
  <div class="Home">
    <el-row>
      <!--内容左半部-->
      <el-col :span="8">
        <!-- 头像，用户名-->
        <el-card class="box-card">
          <div class="user">
            <img src="../assets/52401.png" alt="">
            <div class="userinfo">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
               <p>上次登录的时间：<span>2024-2-28</span></p>
               <p>上次登录的地点：<span>安庆</span></p>
          </div>
        </el-card>
        <div style="height:20px"></div>
        <!-- 课程表格-->
        <el-card class="box-card">
          <el-table :data="tableData" style="width: 100%" size="small">
            <el-table-column v-for="(val,key) in tableLabel" :key='key'  :prop="key" :label="val">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!--内容左半部-->
      <el-col :span="16">
        <!-- 订单详情图组 -->
        <div class="num">
          <el-card v-for="i in countData" :key="i.name" :body-style="{display:'flex',padding:'0'}">
              <i class="icon-s" :class="`el-icon-${i.icon}`" :style="{backgroundColor:i.color}"></i>
              <div class="detail">
                 <p class="price">￥{{ i.value }}</p>
                 <p class="jec">{{ i.name }}</p>
              </div>
            </el-card>
        </div>
          <!--折线图-->
        <el-card style="height: 200px">
        <div ref="echarts1" style="height: 200px"></div>
        </el-card>
        <div class="graph">
           <el-card style="height: 260px"> <div ref="echarts2" style="height: 260px"></div></el-card>
           <el-card style="height: 260px"> <div ref="echarts3" style="height: 260px"></div></el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import{ getData} from '../api'
import * as echarts from 'echarts'
export default {
  name:'Home',
  data() {
    return {
      tableData:[],
      tableLabel: {
                name: '课程',
                todayBuy: '今日购买',
                monthBuy: '本月购买',
                totalBuy: '总购买'
            },
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    }
  },
  mounted(){
     getData().then(({data}) =>{
       const {tableData} = data.data
       this.tableData = tableData
       // 基于准备好的dom，初始化echarts实例
       const echarts1 = echarts.init(this.$refs.echarts1)
            // 指定图表的配置项和数据
            var echarts1Option = {}
            // 处理数据xAxis
            const { orderData, userData, videoData } = data.data
            const xAxis = Object.keys(orderData.data[0])
            const xAxisData = {
                data: xAxis
            }
            echarts1Option.xAxis = xAxisData
            echarts1Option.yAxis = {}
            echarts1Option.legend = xAxisData
            echarts1Option.series = []
            xAxis.forEach(key => {
                echarts1Option.series.push({
                    name: key,
                    data: orderData.data.map(item => item[key]),
                    type: 'line'
                })
            })
            // 使用刚指定的配置项和数据显示图表。
            echarts1.setOption(echarts1Option)

            // 柱状图
            const echarts2 = echarts.init(this.$refs.echarts2)
            const eachrts2Option = {
                legend: {
                    // 图例文字颜色
                    textStyle: {
                    color: "#333",
                    },
                },
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: userData.map(item => item.date),
                    axisLine: {
                    lineStyle: {
                        color: "#17b3a3",
                    },
                    },
                    axisLabel: {
                    interval: 0,
                    color: "#333",
                    },
                },
                yAxis: [
                    {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                        color: "#17b3a3",
                        },
                    },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de"],
                series: [
                    {
                        name: '新增用户',
                        data: userData.map(item => item.new),
                        type: 'bar'
                    },
                    {
                        name: '活跃用户',
                        data: userData.map(item => item.active),
                        type: 'bar'
                    }
                ],
            }
            echarts2.setOption(eachrts2Option)

            // 饼状图
            const echarts3 = echarts.init(this.$refs.echarts3)
            const eachrts3Option = {
                tooltip: {
                    trigger: "item",
                },
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series: [
                    {
                        data: videoData,
                        type: 'pie'
                    }
                ],
            }
            echarts3.setOption(eachrts3Option)
     })
     
    }
}
</script>

<style lang="less" scoped>

  .user {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  img {
    margin-right: 40px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .userinfo {
    .name {
      font-size: 24px;
      margin-bottom: 10px;
    }
    .access {
      color: #999;
    }
  

}
}
.login-info {
  p{
    line-height: 20px;
    font-size: 12px;
    color: #999;
    span {
        color: #666;
        margin-left: 60px;
        }
  }
}
  .box-card{
    width:95%
  }
.num{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .icon-s {
     width: 80px;
     height: 80px;
     font-size: 30px;
     text-align: center;
     line-height: 80px;
     color: #fff;
    }
    .detail{
      margin-left:15px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .price{
       font-size: 30px;
       margin-bottom: 10px;
       line-height: 10px;
       height:30px
       }
    .jec{
      color:#999;
      text-align: center;
      font-size: 13px;

    }
    }
    
  .el-card{
     width:32%;
     margin-bottom: 20px;
  }
}
.graph{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .el-card{
     width:48%;
  }
}


</style>